<template>
	<view class="box">
		<!-- 选择会员 -->
		<view class="selectMember">
			<view class="member"  @click="id ? dialog = false : dialog = true">
				<image src="../../../static/img/quickly/information/add@2x.png"></image>
				<text>{{userName || '选择会员'}}</text>
			</view>
			<view class="save" @click="showModalBtn(1)">保存</view>
			<view class="toSend" @click="showModalBtn(2)">确认存档</view>
		</view>
		
		<view class="mainContent">
			<!-- 基本信息 -->
			<view class="basicInformation">
				<view class="title">基本信息</view>
				<view class="informationBox">
					<view class="item">
						<text>身份证号：</text>
						<text>{{memberInformation.idCard || '未填写'}}</text>
					</view>
					<view class="item">
						<text>姓名：</text>
						<text>{{memberInformation.realName || '未填写'}}</text>
					</view>
					<!-- <view class="item">
						<text>性别：</text>
						<text>{{memberInformation.sex && memberInformation.sex == 1 ? '男' : memberInformation.sex == 2 ? '女' : '未填写' }}</text>
					</view> -->
					<view class="item">
						<text>性别：</text>
						<input type="text" placeholder="性别" v-model="sex" disabled="true" @click="popUp('sex')">
					</view>
					<view class="item">
						<text>出生日期：</text>
						<text>{{memberInformation.birthday || '未填写'}}</text>
					</view>
					<view class="item">
						<text>年龄：</text>
						<input type="text" placeholder="年龄" v-model="age">
					</view>
					<!-- <view class="item">
						<text>年龄：</text>
						<text>{{memberInformation.age ? memberInformation.age + '岁' :'未填写'}}</text>
					</view> -->
					<view class="item">
						<text>手机号：</text>
						<text>{{memberInformation.phone || '未填写'}}</text>
					</view>
				</view>
			</view>
			
			<!-- 其他信息 -->
			<view class="otherInformation">
				<view class="title">其他信息</view>
				<view class="otherInformationBox">
					<view class="item">
						<text>民族：</text>
						<input type="text" placeholder="选择民族" disabled="true" @click="popUp('national')" v-model="nation">
					</view>
					<view class="item">
						<text>工作单位：</text>
						<input type="text" placeholder="请输入您的工作单位" v-model="employer">
					</view>
					<view class="item">
						<text>紧急联系人：</text>
						<input type="text" placeholder="紧急联系人名字" v-model="emergencyContactName">
					</view>
					<view class="item">
						<text>联系电话：</text>
						<input type="text" placeholder="紧急联系人电话" v-model="emergencyContactPhone" @blur="phoneBlur">
					</view>
					<view class="item">
						<text>血型：</text>
						<input type="text" placeholder="选择血型" disabled="true" @click="popUp('bloodType')" v-model="bloodGroup">
					</view>
					<view class="item">
						<text>文化程度：</text>
						<input type="text" placeholder="选择文化程度" disabled="true" @click="popUp('levelEducation')" v-model="educationLevel">
					</view>
					<view class="item">
						<text>职业：</text>
						<input type="text" placeholder="选择职业" disabled="true" @click="popUp('professional')" v-model="occupation">
					</view>
					<view class="item">
						<text>婚姻状况：</text>
						<input type="text" placeholder="选择状况" disabled="true" @click="popUp('maritalType')" v-model="maritalStatus">
					</view>
					<view class="item">
						<text>医疗支付：</text>
						<input type="text" placeholder="选择方式" disabled="true" @click="popUp('medicalPayments')" v-model="medicalExpensesType">
					</view>
				</view>
			</view>
			
			<!-- 健康信息 -->
			<view class="healthIformation">
				<view class="title">健康信息</view>
				<view class="healthInformationBox">
					<u-collapse>
						<u-collapse-item :title="historytitle || '药物过敏史：无'">
							<u-checkbox-group>
								<u-checkbox active-color="#38CB97" @change="checkboxChange($event,index,historyArr,'history')" v-for="(item, index) in historyArr" :key="index" v-model="item.checked"  :name="item.name" >
									{{item.name}}
								</u-checkbox>
							</u-checkbox-group>
						</u-collapse-item>
						
						<u-collapse-item :title="exposureHistorytitle || '暴露史：无'">
							<u-checkbox-group>
								<u-checkbox active-color="#38CB97" @change="checkboxChange($event,index,exposureHistory,'exposureHistoryArr')" v-for="(item, index) in exposureHistory" :key="index" v-model="item.checked"  :name="item.name" >
									{{item.name}}
								</u-checkbox>
							</u-checkbox-group>
						</u-collapse-item>
					
					</u-collapse>
				</view>
			</view>	
			
           <view style="background-color: #FFFFFF; margin-top: 24upx;">
			   <!-- 既往史（疾病）-->
			   <view class="previousHistory">
			   	<view class="title bottomLine" @click="historyNameOne">
			   		<text>既往史（疾病）</text>
			   		<text>添加</text>
			   	</view>
			   	<view class="previousHistoryBox">
			   		<view class="item" v-for="(atem,index) in pastHistorydisease" :key="index">
			   			<span class="nameOf" @click="popUp('historyName',index,pastHistorydisease)" v-model="atem.name">{{atem.name || '请选择'}}</span>
			   			<text></text>
			   			<view>
			   				<picker mode="date" :value="atem.value" :start="startDate" :end="endDate" @change="timeConfirm" @click="timePopUp('historyName',index,pastHistorydisease)">
			   					<view class="uni-input">{{atem.value || '请选择时间'}}</view>
			   				</picker>
			   				<image src="../../../static/img/quickly/information/close@2x.png" @click="historyNameOneDel(index)"></image>
			   			</view>
			   		</view>
			   	</view>
			   </view>
			   
			   <!-- 既往史（手术）-->
			   <view class="previousHistory">
			   	<view class="title bottomLine"  @click="historyNameTwo">
			   		<text>既往史（手术）</text>
			   		<text>添加</text>
			   	</view>
			   	<view class="previousHistoryBox">
			   		<view class="item" v-for="(atem,index) in pastHistorysurgery" :key="index">
			   			<input type="text" class="nameOf" placeholder="输入名称" v-model="atem.name">
			   			<text></text>
			   			<view>
			   				<picker mode="date" :value="atem.value" :start="startDate" :end="endDate" @change="timeConfirm" @click="timePopUp('historyNameTwo',index,pastHistorysurgery)">
			   					<view class="uni-input">{{atem.value || '请选择时间'}}</view>
			   				</picker>
			   				<image src="../../../static/img/quickly/information/close@2x.png" @click="historyNametwoDel(index)"></image>
			   			</view>
			   		</view>
			   	</view>
			   </view>
			   
			   <!-- 既往史（外伤）-->
			   <view class="previousHistory">
			   	<view class="title bottomLine" @click="historyNameThree">
			   		<text>既往史（外伤）</text>
			   		<text>添加</text>
			   	</view>
			   	<view class="previousHistoryBox">
			   		<view class="item"  v-for="(atem,index) in pastHistoryTraumae" :key="index">
			   			<input type="text" class="nameOf" placeholder="输入名称"   v-model="atem.name">
			   			<text></text>
			   			<view>
			   				<picker mode="date" :value="atem.value" :start="startDate" :end="endDate" @change="timeConfirm" @click="timePopUp('historyNameThree',index,pastHistoryTraumae)">
			   					<view class="uni-input">{{atem.value || '请选择时间'}}</view>
			   				</picker>
			   				<image src="../../../static/img/quickly/information/close@2x.png"  @click="historyNamethreeDel(index)"></image>
			   			</view>
			   		</view>
			   	</view>
			   </view>
			   
			   <!-- 既往史（输血）-->
			   <view class="previousHistory">
			   	<view class="title"  @click="historyNameFour">
			   		<text>既往史（输血）</text>
			   		<text>添加</text>
			   	</view>
			   	<view class="previousHistoryBox topLine">
			   		<view class="item"  v-for="(atem,index) in pastHistorytransfusion" :key="index">
			   			<input type="text" class="nameOf" placeholder="输入名称" v-model="atem.name">
			   			<text></text>
			   			<view>
			   				<picker mode="date" :value="atem.value" :start="startDate" :end="endDate" @change="timeConfirm" @click="timePopUp('historyNameFour',index,pastHistorytransfusion)">
			   					<view class="uni-input">{{atem.value || '请选择时间'}}</view>
			   				</picker>
			   				<image src="../../../static/img/quickly/information/close@2x.png" @click="historyNamefourDel(index)"></image>
			   			</view>
			   		</view>
			   	</view>
			   </view>
		   </view>
			
			<!-- 家族史 -->
			<view class="previousHistory">
				<view class="title headLine">家族史</view>
				<view class="healthInformationBox">
					<u-collapse>
						<u-collapse-item :title="fathertitle || '父亲：无'">
							<u-checkbox-group>
								<u-checkbox active-color="#38CB97" @change="checkboxChange($event,index,fatherArr,'fatherArray')" v-for="(item, index) in fatherArr" :key="index" v-model="item.checked"  :name="item.name" >
									{{item.name}}
								</u-checkbox>
							</u-checkbox-group>
						</u-collapse-item>
						
						<u-collapse-item :title="monthertitle || '母亲: 无'">
							<u-checkbox-group>
								<u-checkbox active-color="#38CB97" @change="checkboxChange($event,index,motherArr,'montherArray')" v-for="(item, index) in motherArr" :key="index" v-model="item.checked"  :name="item.name" >
									{{item.name}}
								</u-checkbox>
							</u-checkbox-group>
						</u-collapse-item>
						
						<u-collapse-item :title="sistertitle || '兄弟姐妹: 无'">
							<u-checkbox-group>
								<u-checkbox active-color="#38CB97" @change="checkboxChange($event,index,sisterArr,'sisterArray')" v-for="(item, index) in sisterArr" :key="index" v-model="item.checked"  :name="item.name" >
									{{item.name}}
								</u-checkbox>
							</u-checkbox-group>
						</u-collapse-item>
						
						<u-collapse-item :title="sontitle || '子女: 无'">
							<u-checkbox-group>
								<u-checkbox active-color="#38CB97" @change="checkboxChange($event,index,sonArr,'sonArray')" v-for="(item, index) in sonArr" :key="index" v-model="item.checked"  :name="item.name" >
									{{item.name}}
								</u-checkbox>
							</u-checkbox-group>
						</u-collapse-item>
					
					</u-collapse>
				</view>
			</view>
			
			<!-- 遗传病史 -->
			<view class="geneticHistory">
				<view class="item" @click="geneticHistoryAdd">
					<text>遗传病史：{{geneticDisease.length > 0 ? '':'无'}}</text>
					<text>添加</text>
				</view>
				<view class="add">
					<view class="addContent" v-for="(item,index) in geneticDisease" :key="index">
						<input type="text" placeholder="遗传病名称" v-model="item.genetic">
						<image src="../../../static/img/quickly/information/close@2x.png" @click="geneticHistoryDel(index)"></image>
					</view>
				</view>
			</view>
			
			<view class="disability">
				<u-collapse>
					<u-collapse-item :title="disabilitytitle || '残疾情况：无残疾'">
						<u-checkbox-group>
							<u-checkbox active-color="#38CB97" @change="checkboxChange($event,index,disabilityArr,'disabilityArray')" v-for="(item, index) in disabilityArr" :key="index" v-model="item.checked"  :name="item.name" >
								{{item.name}}
							</u-checkbox>
						</u-checkbox-group>
					</u-collapse-item>
				
				</u-collapse>
			</view>
		</view>
		<!-- 会员弹框 -->
		<member :dialog.sync="dialog"  @hidedialog="hidedialog" @chooseUser="chooseUser"></member>
		
		<!-- 下拉框 -->
		<u-select v-model="show" @confirm="confirm" :list="defaultArr"></u-select>
		
		<!-- 时间 -->
		<u-modal v-model="showModal" :content="showContent" :show-cancel-button="true" @confirm="sureconfirm" @cancel="cancel"></u-modal>
	</view>
</template>

<script src="@/static/js/quickly/information/information"></script>

<style lang="scss" scoped>
	@import '@/static/css/quickly/information/information';
	/deep/ .u-checkbox-group {
		display: flex;
		flex-wrap: wrap;
	}
	/deep/ .u-checkbox {
		width: 33% !important;
		padding-bottom: 24upx;
	}
</style>
